<template>
  <div>shop</div>
  <!--  shop表单查询条件-->
  <el-form :model="shopDto" label-width="auto" style="max-width: 600px">
    <el-form-item label="类别编号">
      <el-input v-model="shopDto.id" @change="getShopList()" clearable />
    </el-form-item>
    <el-form-item label="类别名称">
      <el-input v-model="shopDto.shopName" @change="getShopList()" clearable />
    </el-form-item>
    <el-form-item label="父类编号">
      <el-input v-model="shopDto.pId" @change="getShopList()" clearable />
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="getShopList()">查询</el-button>
  <el-button type="primary" @click="ShopSaveShow()">添加商品类别</el-button>
  <!--  列表-->
  <el-table :data="shopData" style="width: 100%">
    <el-table-column prop="id" label="类别编号" />
    <el-table-column prop="shopName" label="类别名称" />
    <el-table-column prop="pid" label="父类编号" />
    <el-table-column prop="shopType" label="类别等级" #default="scope">
      <p>{{ scope.row.shopType == 1 ? '一级类别' : '二级类别' }}</p>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          修改
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <el-pagination
    v-model:current-page="shopDto.pageNum"
    v-model:page-size="shopDto.pageSize"
    :page-sizes="[10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="shopDto.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <el-dialog
    v-model="shopDialogVisible"
    :title="ShopTitle"
    width="500"
    :before-close="handleClose"
  >
    <div>{{ shopTitle }}</div>
    <el-form :model="shopForm" label-width="auto" style="max-width: 600px">
      <el-form-item label="类别编号" v-if="shopForm.id != null">
        <el-input v-model="shopForm.id" />
      </el-form-item>
      <el-form-item label="类别名称">
        <el-input v-model="shopForm.shopName" />
      </el-form-item>
      <el-form-item label="父类编号">
        <el-select
          v-model="shopForm.shopType"
          clearable
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option
            v-for="item in shopTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属一级类别" v-if="shopForm.shopType == 2">
        <el-select
          v-model="shopForm.pId"
          clearable
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option
            v-for="item in shops"
            :key="item.id"
            :label="item.shopName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="shopSaveOrUpdate()">保存商品类别</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { deleteShop, saveOrUpdate, shopList } from '@/api/shop'

const shopData = ref([])
const shopDto = ref({
  pageNum: 1,
  pageSize: 4,
  total: 10,
  id: null,
  shopName: null,
  pId: null,
})
const getShopList = () => {
  shopList(shopDto.value).then(res => {
    console.log(res.data)
    shopData.value = res.data.list
    shopDto.value.total = res.data.total
  })
}
getShopList()
const handleSizeChange = val => {
  shopDto.value.pageSize = val
  getShopList()
}
const handleCurrentChange = val => {
  shopDto.value.pageNum = val
  getShopList()
}

const shopForm = ref({
  id: null,
  shopName: null,
  shopType: null,
  pId: null,
})
const shopTypes = ref([
  {
    value: 1,
    label: '一级类别',
  },
  {
    value: 2,
    label: '二级类别',
  },
])
const shops = ref([
  {
    id: 1,
    shopName: '1家用电器',
  },
  {
    id: 2,
    shopName: '2电脑办公',
  },
  {
    id: 3,
    shopName: '3美妆个护',
  },
])
const shopDialogVisible = ref(false)
const shopTitle = ref('')
// 添加
const ShopSaveShow = () => {
  shopForm.value = {}
  shopTitle.value = '添加'
  shopDialogVisible.value = true
}
// 修改
const handleEdit = row => {
  shopTitle.value = '修改'
  shopDialogVisible.value = true
  shopForm.value = row
  shopForm.value.pId = row.pid
  console.log(shopForm.value)
}
const shopSaveOrUpdate = () => {
  saveOrUpdate(shopForm.value).then(res => {
    shopDialogVisible.value = false
    getShopList()
    shopForm.value = {}
  })
}
const handleDelete = id => {
  console.log(id)
  deleteShop(id).then(res => {
    getShopList()
  })
}
</script>
